<template>
  <div class="content">
    <div class="user">
      <div class="info">
        <img src="http://placehold.it/46" alt="">
        <div>
          <h3>匿名用户</h3>
          <span>2018-10-15</span>
        </div>
      </div>
      <van-rate
            v-model="value"
            :size="10"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            readonly
            class="pl"
          />
    </div>
    <div class="user-text">
      <p>
        味道很清新，很想之前闻过的味道，不会很冲，包装也很好，还送了体验装，好评哦～
      </p>
      <ul>
        <li><img src="http://placehold.it/107" alt=""></li>
        <li><img src="http://placehold.it/107" alt=""></li>
        <li><img src="http://placehold.it/107" alt=""></li>
        <li><img src="http://placehold.it/107" alt=""></li>
        <li><img src="http://placehold.it/107" alt=""></li>
        <li><img src="http://placehold.it/107" alt=""></li>
      </ul>
      <div>
        <span>铃兰香, 30ml</span>
        <b><i class="yo-ico">&#xe623;</i>330</b>
      </div>
      <div class="reply">
        <p>
          <b>商家回复：</b>亲爱顾客，您好，非常感谢您的好评，您的肯定是对我们最大安慰，期待您的再次光临。
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Rate } from 'vant';
import { Icon } from 'vant';

Vue.use(Icon);
Vue.use(Rate);
export default {
 data() {
    return {
      value: 5,
    };
  },
}
</script>

<style lang="stylus" scoped>
.content
  display flex
  flex-direction column
  .user
    display flex 
    height .46rem
    justify-content space-between
    margin-bottom .1rem
    .info
      display flex 
      img 
        display block
        border-radius 50%
      >div
        display flex 
        flex-direction column
        justify-content space-around
        padding-left .07rem
        h3
          color #333
        span 
          font-size .12rem
          color #999
    .pl
      padding-top .06rem
  .user-text
    p
      color #333
      font-size .12rem;
      line-height .24rem
    ul
      display flex 
      flex-wrap wrap
      justify-content space-between
      li
        padding-top .05rem
        felx 33.3%
        img 
          width 1.07rem
          height 1.07rem
    div
      display flex
      justify-content space-between
      font-size .12rem
      line-height .36rem
      span
        color #ccc      
      b
        font-weight 400
        i 
          margin-right .05rem
          vertical-align bottom
    .reply
      line-height: 24px;
      background-color #f8f8fe
      padding .1rem .07rem
      p
        font-size .12rem
        color #999
        b
          color #666

</style>